/**
 * 组件通信
 * 【说明】：组件通信就是组件与组件之间的数据传递，根据组件的嵌套关系的不同，有不同的组件通信方式
 * 【关系】：父子组件
 *              1、父组件传递数据、在子组件标签上绑定属性
 *              2、子组件接收数据、子组件通过props参数接收数据
 *          兄弟组件
 *          跨层组件
 */

/**
 * 父子组件通信 父传子
 * 【注意】：props可以传递任意的数据类型：可以是字符串，布尔值，数字，对象，数组，函数，JSX模版
 *          props是一个只读对象，，不能直接进行修改，父组件的数据只能由父组件进行修改
 * @param {*} props 
 * @returns 
 */
function Son(props) {
  // props是一个对象、对象内包含父组件传递过来的数据
  console.log(props);
  return (
    <div>子组件：
      <p>{props.name}</p>
      <p>{props.age}</p>
      <p>{props.isTrue}</p>
      <p>{props.list}</p>
      <p>{props.obj.dog}</p>
      <p>{props.foo()}</p>
      <p>{props.jsx}</p>

      <p>{props.children}</p>
    </div>
  )
}

function FathertoSon() { // 父组件
  let name = "Hello ZhangSan！"
  return (
    <div>
      父组件：{name}
      <Son name={name} age={18} isTrue={false} list={[1, 2, 4, 5]} obj={{ dog: "旺财" }} foo={() => "回调函数"} jsx={<b>Hello</b>}>
        {/* 在父组件中使用子组件，如果子组件下嵌套元素也会被传递到子组件去，在子组件中可通过props.children获取 */}
        <span>你好</span>
      </Son>
    </div>
  )
}


export default FathertoSon